/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
     InputLine, TextArea, Text, BlobInputList, Button, InputDatalist, useToast
} from "customize-easy-ui-component";
import {
    InspectRecordLayout, InternalItemProps, useInputControlSure, useItemInputControl
} from "../../common/base";
import {EditStorageContext} from "../../StorageContext";
import {Each_ZdSetting, useTableEditor} from "../../hook/useRepTableEditor";
import {useMeasureInpFilter} from "../../common/hooks";
import {useUppyUpload} from "../../hook/useUppyUpload";
import {useMedia} from "use-media";
import {assertNamesUnique} from "../../common/eHelper";
import {eqpTypeAllMap} from "../../../dict/eqpComm";


const 示图说明选=['见单线图','对单线图中1-6 号焊缝外表面进行100%磁粉检测，未见超标缺陷。',
];
const 检测结果选=["所检测区域未发现超标缺陷。",
];
const itemA测点位置=['示图说明','_FILE_S部位','检测结果'];
//只能上不变的：不能hook是死循环
const defaultValCb= (par: { 检测结果?: any; })=>{
    const { 检测结果 }=par||{};
    if(!检测结果)   par.检测结果='对图示1-18、55-71号焊缝外表面进行100%磁粉检测，未见超标缺陷，检测结果为1级。';
    return  par;
}
export const ResultDiagram=
  React.forwardRef((
    { children, show ,alone=true,redId,nestMd, repId}:InternalItemProps,  ref
  ) => {
      const {modified,setModified,} =React.useContext(EditStorageContext) as any;
      const [getInpFilter] = useMeasureInpFilter(null, itemA测点位置, defaultValCb);
      const {inp, setInp,onSure} = useInputControlSure({ ref,redId,nestMd });
      const onFinish = React.useCallback(async(upfile: any, del:boolean) => {
          onSure({...inp, '_FILE_S部位': upfile});
          !modified && setModified(true);
      }, [inp, modified,onSure,setModified]);
      const [uploadDom]=useUppyUpload({ repId:repId!,
           maxFile:5, onFinish, storeObj: inp?._FILE_S部位
      });

    return (
      <InspectRecordLayout inp={inp} setInp={setInp}  getInpFilter={getInpFilter} show={show} redId={redId} nestMd={nestMd}
                           alone={alone}  label={'磁粉检测结果，部位及缺陷示意图'}>
          <InputLine label='检测部位及缺陷位置示意图：'>
              <BlobInputList value={inp?.示图说明 || ''} rows={5} datalist={示图说明选}
                             onListChange={v => setInp({...inp, 示图说明: v || undefined}) } />
          </InputLine>
          位置示意图：
          {uploadDom}
        检测结果:
         <BlobInputList value={inp?.检测结果 || ''} rows={8} datalist={检测结果选}
                         onListChange={v => setInp({...inp, 检测结果: v || undefined}) } />
        {children}
      </InspectRecordLayout>
    );
} );

const 设备类别选=['GC2','工艺管道' ];
const 材质选=['20' ];
const 表面状态选=['经表面处理后' ];
const 热处理状态选=['处理' ];
const 规格尺寸选=['见管道特性表' ];
const 灵敏度试片选=['A1:30/100' ];
const 检测时机选=['宏观检验后' ];
const 合格级别选=['Ⅰ级' ];
const 检测方法选=['连续法','湿法/连续法' ];
const 磁粉类型选=['非荧光磁粉' ];
const 磁悬液选=['低粘度油基' ];
const 磁化方法选=['磁轭法' ];
const 提升力选=['≥45N' ];
//古怪啊： 报告的标题view 和编辑器里面的text，分开的情形：需要修正标题字体格式。
const render技等级={
    view:(orc:any)=>{
        return <Text css={{fontSize:'0.7rem'}}>检测{orc}等级</Text>
    },
    text: '检测技术等级',         //标题的文本
    //edit: (inp, setinp)=>{} 编辑器组件的。
};
const render设备类别={
    view:(orc:any, parentOrc:any)=>{
        return <>{eqpTypeAllMap.get(parentOrc?.设备类别)}</>
    },
};

/**必须从上级的 _$设备名称 _$eqpcod，才能提取：分项报告只能约束到特定标号的分项对象底下提取的，所以没有像主报告一样能读到 # orc=parentOrc['_MAGNT_TS_'+surpId];。
 * */
export const config测量仪 = [
    [['设备名称', '_$设备名称'], ['设备编号', {n:'设备编',t:'l',l:['见特性表']}], ['设备类别', {n:'设备类',t:'l',l:设备类别选}]],
    [['部件名称','部件'], ['部件编号', '部件号'], ['材质', {n:'材质',t:'l',l:材质选}]],
    [['规格尺寸',{n:'规格',t:'l',l:规格尺寸选}], ['表面状态', {n:'表面',t:'l',l:表面状态选}], ['热处理状态', {n:'热处',t:'l',l:热处理状态选}]],
    [['检测标准', '检标准'], ['检测比例', {n:'检比例',t:'l',l:['27.3%（抽查）']} ], ['灵敏度试片', {n:'灵试',t:'l',l:灵敏度试片选}]],
    [['检测时机', {n:'时机',t:'l',l:检测时机选}], ['合格级别', {n:'合级别',t:'l',l:合格级别选} ], ['检测方法', {n:'检法',t:'l',l:检测方法选}]],
    [['磁粉类型', {n:'粉类',t:'l',l:磁粉类型选}], ['磁悬液', {n:'悬液',t:'l',l:磁悬液选}], ['磁化方法', {n:'磁化法',t:'l',l:磁化方法选}]],
    [['提升力/磁化电流', {n:'升力',t:'l',l:提升力选}], ['施加方法','施法'], ['电流类型', '电类']],
];


//【定做表格编辑器做法2】1，可不采用useTableEditor({editAs });来注入的； 单个回调注入也可以的。
//【优点】这个回调局部化，不需要知道表格名，以及表格的当前操作行号就能保存。 本方式的解耦合较好！存储字段名‘f’要对上。
const cb缺陷= (inp: any, setInp: React.Dispatch<React.SetStateAction<any>>,name:string) => {
   return  <InputDatalist value={(inp?.[name]) || ''} datalist={['0位']}
                   onListChange={v => setInp({ ...inp, [name] :v || undefined}) } />
}
const cb性质= (inp: any, setInp: React.Dispatch<React.SetStateAction<any>>,name:string) => {
    return  <InputDatalist value={(inp?.[name]) || ''} datalist={['未焊透/整条']}
                           onListChange={v => setInp({ ...inp, [name] :v || undefined}) } />
}
const cb级别= (inp: any, setInp: React.Dispatch<React.SetStateAction<any>>,name:string) => {
    return  <InputDatalist value={(inp?.[name]) || ''} datalist={['Ⅳ级','Ⅲ级','Ⅱ级','Ⅰ级']}
                           onListChange={v => setInp({ ...inp, [name] :v || undefined}) } />
}

export const config评定=[['部位编号','n',120],['缺陷编号','h',90],['缺陷位置','p',80, cb缺陷],
    ['长度（mm）','l',85],['缺陷性质','Q',120, cb性质], ['评定级别','C',55, cb级别],['备 注','m',105]] as Each_ZdSetting[];
const itemA评定=['评定表' ];
export const EvaluationForm=
    React.forwardRef(({ children, show ,alone=true,refWidth,redId,nestMd}:InternalItemProps,  ref
    ) => {
        const [getInpFilter]=useMeasureInpFilter(null,itemA评定,);
        const {inp, setInp} = useItemInputControl({ ref,redId,nestMd });
        const tableName='评定表';
        const headview=<Text variant="h5">
            磁 粉 检 测 结 果 评 定 表。
        </Text>;
        //不用默认Input，想用列表选择输入的： const editAs=(obj:any, setObj:React.Dispatch<React.SetStateAction<any>>, seq:number | null)=>{};
        const [render部位汇总]=useTableEditor({inp, setInp,  headview,
            config: config评定, table:tableName, column:4,  maxRf:3, });

        return (
            <InspectRecordLayout inp={inp} setInp={setInp}  getInpFilter={getInpFilter} show={show}  redId={redId} nestMd={nestMd}
                                 alone={alone}  label={'磁 粉 检 测 结 果 评 定 表'}>
                {render部位汇总}
            </InspectRecordLayout>
        );
    } );


/**【开发测试用的】
 * */
export const EntranceSetup =
    React.forwardRef((
        {children, show, alone = true, repId, verId, rep}: InternalItemProps, ref
    ) => {
        const atPrint = useMedia('print');
        const toast = useToast();
        const checkName = true;      //开发测试完，改成=false, 测试时 REACT_APP_TEST 需设置， 开发模式的校对开关。
        const doCheckNames = React.useCallback((verId: string) => {
            //【承压更少项目】，那些属于公共模板目录的 分项报告的唯一性检查在对方自己检查看。
            const result = assertNamesUnique([{value: rep?.tzFields},
                {value: config测量仪, type:'esnt'},
                {value:[...itemA测点位置,...itemA评定, ]},
                 ]);
            toast({title: "完成！", subtitle: result ? "没发现冲突" : "测试开关没开", intent: "success"});
        }, [rep,toast]);
        const getInpFilter = React.useCallback((par: any) => {}, []);
        const {inp, setInp} = useItemInputControl({ref});
        if (atPrint) return null;
        else return (
            <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show}
                                 alone={alone} label={'初始化本报告，默认值配置等'}>
                {checkName && <div>
                    <Text variant="h5">
                        构建开发模板时的工具：校验模板的存储name冲突；
                    </Text>
                    <Button intent='primary' onPress={() => {
                        doCheckNames(verId!);
                    }}>校验模板name唯一性</Button>
                </div>
                }
                <hr/>
            </InspectRecordLayout>
        );
    });

